<template>
	<view>
		<u-navbar :is-back="true" :back-icon-color="vuex_titleColor" :title="title" :title-color="vuex_titleColor" :background="vuex_navBackground"></u-navbar>
		<view class="u-page">
			<!-- 所有内容的容器 -->
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				设置中英文切换
			</view>
			<view style="margin-top: 5rpx;">
				<u-button @click="switchLang('zh')">切换中文语言</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="switchLang('en')">切换英文语言</u-button>
			</view>
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				设置主题
			</view>
			<view style="margin-top: 5rpx;">
				<u-button @click="setThemeSkin('normal-skin')">默认主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('dark-skin')">黑色主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('red-skin')">红色主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('pink-skin')">粉色主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('orange-skin')">橘黄主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('green-skin')">绿色主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('scarlet-skin')">绯红色主题</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button @click="setThemeSkin('blue-skin')">蓝色主题</u-button>
			</view>
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				主题开关
			</view>
			<view style="margin-top: 10rpx;">
				<u-switch v-model="checked" :active-color="vuex_themeColor" inactive-color="#eee" size="30"></u-switch>
			</view>
			<view style="margin-top: 10rpx;">
				<u-radio-group v-model="value">
					<u-radio name="男" :active-color="vuex_themeColor">男</u-radio>
					<u-radio name="女" :active-color="vuex_themeColor">女</u-radio>
				</u-radio-group>
			</view>
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				主题按钮
			</view>
			<view style="margin-top: 5rpx;">
				<u-button :custom-style="{borderStyle: 'solid',borderColor: this.$store.state.vuex_themeColor,color: this.$store.state.vuex_themeColor}">默认按钮</u-button>
			</view>
			<view style="margin-top: 10rpx;">
				<u-button :custom-style="{backgroundColor: this.$store.state.vuex_themeColor,color: '#ffffff'}">主要按钮</u-button>
			</view>
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				主题自定义字体图标
			</view>
			<view style="margin-top: 5rpx;">
				<u-icon name="shouye-xuanzhong" custom-prefix="custom-icon"  size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="shouye-weixuanzhong" custom-prefix="custom-icon" size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="shangcheng-xuanzhong" custom-prefix="custom-icon"  size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="shangcheng-weixuanzhong" custom-prefix="custom-icon" size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="gouwuche-xuanzhong" custom-prefix="custom-icon"  size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="gouwuche-weixuanzhong" custom-prefix="custom-icon" size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="gerenzhongxin-xuanzhong" custom-prefix="custom-icon"  size="20px" :color="vuex_themeColor"></u-icon>
				<u-icon name="gerenzhongxin-weixuanzhong" custom-prefix="custom-icon" size="20px" :color="vuex_themeColor"></u-icon>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view style="margin-top: 15rpx;margin-bottom: 10px;">
				检查更新
			</view>
			<view style="margin-top: 5rpx;">
				<u-button :custom-style="{backgroundColor: this.$store.state.vuex_themeColor,color: '#ffffff'}" @click="doUpApp()">检查更新</u-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import upApp from "@/uni_modules/uni-upgrade-center-app/utils/check-update"
	// #endif
	export default {
		data() {
			return {
				checked: true,
				value: '男',
				//主題顔色
				skin: {
					//默认主题
					'normal-skin':{
					  themeColor: '#888888',
					  textColor:'#000000',
					  navNackgroundColor:'#ffffff',
					  skinColor:'#000000',
					  tabbarActiveColor:'#000000'
					},
					//黑色主题
					'dark-skin': {
					  themeColor: '#000000',
					  textColor: '#ffffff',
					  navBackgroundColor: '#000000',
					  skinColor:'#000000',
					  tabbarActiveColor:'#000000'
					},
					//红色主题
					'red-skin': {
					  themeColor: '#ef1033',
					  textColor: '#ffffff',
					  navBackgroundColor: '#ef1033',
					  skinColor:'#ef1033',
					  tabbarActiveColor:'#ef1033'
					},
					//粉色主题
					'pink-skin': {
					  themeColor: '#f56fa6',
					  textColor: '#ffffff',
					  navBackgroundColor: '#f56fa6',
					  skinColor:'#f56fa6',
					  tabbarActiveColor:'#f56fa6'
					},
					//橘黄主题
					'orange-skin': {
					  themeColor: '#ff8340',
					  textColor: '#ffffff',
					  navBackgroundColor: '#ff8340',
					  skinColor:'#ff8340',
					  tabbarActiveColor:'#ff8340'
					},
					//绿色主题
					'green-skin': {
					  themeColor: '#86b902',
					  textColor: '#ffffff',
					  navBackgroundColor: '#86b902',
					  skinColor:'#86b902',
					  tabbarActiveColor:'#86b902'
					},
					//绯红色主题
					'scarlet-skin': {
					  themeColor: '#e85a71',
					  textColor: '#ffffff',
					  navBackgroundColor: '#e85a71',
					  skinColor:'#e85a71',
					  tabbarActiveColor:'#e85a71'
					},
					//蓝色主题
					'blue-skin': {
					  themeColor: '#40baff',
					  textColor: '#ffffff',
					  navBackgroundColor: '#40baff',
					  skinColor:'#40baff',
					  tabbarActiveColor:'#40baff'
					}
				},
			}
		},
		computed: {
			title() {
				return '主题设置'
			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			//模拟onShow方法
			onHandleShow() {
				
			},
			// 切换为中英文
			switchLang(lang) {
				this.$i18n.locale = lang;
				this.$u.vuex('vuex_tabbar', this.$t('tabbar'));
				this.$u.vuex('vuex_lang', lang);
				uni.setStorage({
				    key: 'lang',
				    data: lang,
				    success: function () {
				        // 存储成功的回调
						console.log("保存主题信息")
				    }
				});
			},
			// switch打开或者关闭时触发，值为true或者false
			// 即使不监听此事件，this.checked此时也会相应的变成true或者false
			change(status) {
				// console.log(status);
			},
			setThemeSkin(str){
			    //设置主题风格
			    var theme = this.$data.skin[str];
			    console.log("themeSkin："+theme)
				// 主题色
				this.$u.vuex('vuex_themeColor', theme.themeColor);
				// 各个栏目标题配色 ex: 活动产品 人员推荐 等
				this.$u.vuex('vuex_titleColor', theme.textColor);
				// 文字主色
				this.$u.vuex('vuex_textColor', theme.textColor);
				// 底部菜单 选中颜色
				this.$u.vuex('vuex_tabbarActiveColor', theme.tabbarActiveColor);
				//导航背景颜色
				this.$u.vuex('vuex_navBackground.backgroundColor', theme.navBackgroundColor);
				// 异步存储
				uni.setStorage({
				    key: 'skin',
				    data: theme,
				    success: function () {
				        // 存储成功的回调
						console.log("保存主题信息")
				    }
				});
			},
			doUpApp(){
				upApp();
			}
		}
	
	}
	
</script>

<style>

</style>
